<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES" lang="es_ES" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
		<title>Conecta con tus marcas favoritas y accede a regalos y ofertas exclusivas</title>
	
		<meta name="author" content="Runroom http://www.runroom.com" />
		<meta name="language" content="es_ES" />
		<meta http-equiv="content-style-type" content="text/css" />
		<meta http-equiv="content-script-type" content="text/javascript" />
		<meta name="robots" content="index,follow" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />

		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

		<!-- hojas de estilo //-->
		<link media="all" rel="stylesheet" href="css/styles.css" />
		<link media="all" rel="stylesheet" href="css/custom.css" />
		<link media="all" rel="stylesheet" href="css/qp-v3.css" />

		<!-- conditional comment: CSS para Explorer 7 y menor //-->
			<!--[if lte IE 7]>
				<link rel="stylesheet" href="css/ie7menos.css" />
			<![endif]-->
	
		<!-- incluir scripts //-->
		<script type="text/javascript" src="js/jquery.tools.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		<script type="text/javascript" src="js/jquery.periodicalupdater.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=ABQIAAAAzClpJywkGASi3cdCCxdvnBRyVQWqmkHGDTi57WK1YtyDytrQIhQNeQ5HGi7cnaGyd90vRPydCOgxrA&amp;sensor=false&amp;language=es_ES&amp;v=3.1&amp;region=ES"></script>
		<script type="text/javascript" src="js/json2.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/locationSelector.js"></script>
		<script type="text/javascript" src="js/jquery.flip.min.js"></script>
		<script type="text/javascript" src="js/jquery.countdown.js"></script>
		<script type="text/javascript" src="js/jquery.countdown-es_ES.js"></script>
		<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
		<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
		<script type="text/javascript" src="js/localscroll.js"></script>
		<script type="text/javascript" src="js/jquery.curvycorners.min.js"></script>
		<script type="text/javascript" src="js/jquery.dataTables.js"></script>
		<script type="text/javascript" src="js/mistarjetas.js"></script>
		<!-- end incluir scripts //-->

<script type="text/javascript"> //         
 function verdetalles(id) {
		// abrir detalles de cosas disponibles etc
		$('.detalles').fadeOut('fast');
		$('.disponible').removeClass('clicked');
		$('#detalles_' + id).slideToggle('fast');
		$('#det_trigger_' + id).toggleClass('clicked');
	}

 /* Abrir o cerrar "más info" slide */
 function toggleInfo(id) {
	 // abrir / cerrar div.lamasinfo y anadir/quitar class "open" al/del enlace (a)
	 $('#info_' + id).slideToggle('fast');
	 $('#anchor_info_' + id).html('cerrar');
	 $('#anchor_info_' + id).toggleClass('open');
 }
 $(document).ready(function() {
 	// cerrar ventanita emergente detalles
 	$(".caja").mouseleave(function() {
 		$('.detalles').slideUp('fast');
 		$('.disponible').removeClass('clicked');
 	});

	// cerrar panel de sharing de la tarjeta
		$("#tarjeta").mouseleave(function() {
			$("#st-tarjeta").fadeOut("slow");
		});

 	$(".navi").mousedown(function() {
 		$('.detalles').slideUp('fast');
 		$('.disponible').removeClass('clicked');
 		});

 	// animacion de la tarjeta
 	$("#volver").hide();
 	$("#back").hide();
 	$("#info").click(function() {
 		$("#info").hide();
 		$("#tarjeta").flip({
 		direction : 'lr',
 		onEnd : function() {
 			$("#tarjeta").css('background-color', 'transparent');
 			$("#front").hide();
 			$("#back").show();
 			$("#volver").show();
 			}
 		});
 	});
 	
 	$("#volver").click(function() {
 		$("#volver").hide();
 		$("#tarjeta").flip({
 		direction : 'rl',
 		onEnd : function() {
 			$("#tarjeta").css('background-color', 'transparent');
 			$("#front").show();
 			$("#back").hide();
 			$("#info").show();
 			}
 		});
 	});
 });
 //
</script>


	</head>
	<body>
	<a name="top"></a>
	<noscript>
		<div id="aviso_js">
			<p>Lo sentimos, pero esta web sólo funciona con Javascript activado.</p>
		</div>
	</noscript>
	<!-- conditional comment: aviso para Explorer 6 y menor //-->
	<!--[if lte IE 6]>
		<div id="aviso_ie">
			<p><strong>Hemos detectado que utilizas Internet Explorer 6</strong>, un navegador obsoleto, con problemas de seguridad y compatibilidad conocidos.</p>
			<p>Recomendamos que actualices tu navegador <a href="http://www.browserchoice.eu">en la web de browserchoice.org, haciendo clic aquí</a></p>
		</div>
	<![endif]-->

	<div class="page">

		<div class="user">
			<div class="profile">
				<p class="profile-pic">
					<span class="corners w50px l"><img id="profile-img-photo-booth" src="images/male.png" alt="Matteo Monti" width="50px" height="50px" />
					<span class="cornersgris"></span></span>
				</p>
				<p><span class="bienvenido">Hola, <strong>Matteo Montividerciyarriba</strong>!</span> <small class="bot-salir"><b></b><a href="/login/logout">Salir</a></small></p>
				<p class="mis_cosas">
					<span><b></b><a href="/account/profile">mi perfil</a></span>
					<!-- TODO: variable para saber si tiene o no alguna compra -->
					<span><b></b><a href="/account/index">mis compras</a></span>
					<span class="active"><b></b><a href="/account/index">mis tarjetas</a></span>
				</p>
			</div> <!-- cerrar profile //-->
	
		<div class="mensajes">
			<h2 class="titulo-principal">Mis tarjetas</h2>
			<p class="soft">Revista tus tarjetas, sus estados y sus puntos. <small class="link-volver"><a class="volver" href="/distribution?coupon_id=" title="volver a la oferta">[volver a la oferta]</a></small></p>
		</div> <!-- cerrar mensajes //-->
	</div> <!-- cerrar user //-->


<!-- columna de contenido principal //-->
	<div class="c-960">
		<div class="caja c960 f1f1f1"> <!-- columna de contenido ancho gris, tipo "login" //-->
			<div class="content">

				<div class="mt-list">

					<div class="caja c302">
						<div class="content">
							<h2 class="titulo-principal cajita">Mis tarjetas</h2>

							<div id="mistarjetas">
								<p class="peque disp_tit">Ver tarjetas en las que soy:</p>
								<ul class="peque" id="filtros_tj">
									<li id="todos"><a>todas</a></li>
									<li id="member"><a href="javascript:applyFiltro('member');">Member</a></li>
									<li id="premium"><a href="javascript:applyFiltro('premium');">Premium</a></li>
									<li id="vip"><a href="javascript:applyFiltro('vip');">VIP</a></li>
								</ul>

								<p class="peque disp_tit">Ordenar lista de tarjetas por:</p>
								<ul class="peque" id="filtros_orden_tj">
									<li id="nombre"><a href="javascript:ordenarTarjetas('nombre');">nombre</a></li>
									<li id="fecha"><a href="javascript:ordenarTarjetas('fecha');">fecha</a></li>
									<li id="puntos"><a href="javascript:ordenarTarjetas('puntos');">puntos</a></li>
								</ul> <!-- cerrar #filtros_orden_tj //-->

								<div id="items_mt">
									<ul class="itemlista trj">
										<li class="item_trj it_member">
											<a title="mostrar detalles de esta tarjeta" href="#">
												<span class="tarjeta-marca trj">
													<img src="images/pans/pans-logo-thumb.png" alt="Pans &amp; Company" />
												</span>
												<span class="storename peque">Sport Hotels Resort &amp; Spa</span>
												<span class="countdown_section"><span class="countdown_amount">300</span><br /> PUNTOS </span>
												<span class="statusicon"></span>
												<span class="fecha_trj">14/12/2005</span>
											</a>
										</li>
										<li class="item_trj it_premium">
											<a title="mostrar detalles de esta tarjeta" href="#">
												<span class="tarjeta-marca trj">
													<img src="css/css_images/default_thumb_70x70.png" alt="" />
												</span>
												<span class="storename peque">Custo Barcelona</span>
												<span class="countdown_section"><span class="countdown_amount">14</span> <br /> PUNTOS </span>
												<span class="statusicon"></span>
												<span class="fecha_trj">24/01/2004</span>
											</a>
										</li>
										<li class="item_trj it_vip">
											<a title="mostrar detalles de esta tarjeta" href="#">
												<span class="tarjeta-marca trj">
													<img src="css/css_images/default_thumb_70x70.png" alt="" />
												</span>
												<span class="storename peque">Apple Store Illa Diagonal</span>
												<span class="countdown_section"><span class="countdown_amount">89</span> <br /> PUNTOS </span>
												<span class="statusicon"></span>
												<span class="fecha_trj">30/08/2003</span>
											</a>
										</li>
									</ul>
								</div> <!-- cerrar items_mt //-->

							</div> <!-- cerrar mistarjetas //-->

					</div> <!-- cerrar content //-->

					<div class="cierre"></div>
					</div> <!-- cerrar caja c280 //-->
				</div> <!-- cerrar promos laterales //-->

				<div class="mis-tarjetas">


					<h1 class="titulo-principal">Pans &amp; Company <em>Barcelona</em></h1>
					<p class="peque">
						A la izquierda veras un listado de todas las tarjetas a las que te has conectado. Filtralas y selecciona la que te interesa para ver abajo tus promociones de esta tarjeta.
					</p>


					<div id="tarjeta" class="member">

						<div id="front" style="background: #333 url(images/pans/tarjeta/tarjeta_front.png) 0 0 no-repeat;">
							<div class="t-content">
								<div class="t-anunciante">
									<div class="t-anunciante-logo" style="background: url(images/pans/pans-logo-thumb.png) 0 0 no-repeat;"></div>
									<h5 class="t-anunciante-nombre"><a href="#" title="Pans &amp; Company">Pans &amp; Company</a> <span>Barcelona</span></h5>
								</div> <!-- cerrar t-anunciante //-->
								<div class="t-usuario">
								<div class="estrella"></div>
								<p class="t-usuario-nombre">Andres Iniesta</p>
								<p class="t-usuario-status"><span>PREMIUM</span></p>
							</div> <!-- cerrar t-anunciante //-->
						</div> <!-- cerrar t-content //-->
					</div> <!-- cerrar front //-->

					<div class="puntos-acumulados">
						<p>tienes <span class="num-puntos">200</span> puntos</p>
					</div>

					<div id="back">
						<div class="t-content">
							<p class="peque r50 loyaltylink"><a href="loyalty.html">[Cómo consigo puntos]</a></p>
							<div class="popup">
								<div class="row member">
									<div class="estrella"></div>
									<p class="pqarial">por conectarte <span class="tick"></span></p>
								</div>
								<div class="row premium">
									<div class="estrella"></div>
									<p class="pqarial"><span class="numero">100</span> puntos<span class="tick"></span></p>
								</div>
								<div class="row vip">
									<div class="estrella"></div>
									<p class="pqarial"><span class="numero">200</span> puntos<span class="tick"></span></p>
								</div>
							</div>
							<p class="micro">Pans &amp; Fans</p>
						</div> <!-- cerrar t-content //-->
					</div> <!-- cerrar back //-->

					<div id="info">i</div>
					<div id="volver">&lt;</div>
					<div class="marco"><span class="resplandor"></span><span class="resplandor extra"></span></div>

<!-- COMPARTIR //-->
					<p class="sharetrigger small" onclick="$('#st-tarjeta').fadeIn('slow');"><a href="#"><span>[compartir]</span></a></p>

					<!-- tooltip element -->
					<div class="sharetip" id="st-tarjeta">
						<div class="caja c140 fl-arriba der">
							<div class="content">
								<p><small class="soft">Comparte esta tarjeta</small></p>

								<div class="shareoptions">
									<!-- AddThis Button BEGIN -->
									<div class="addthis_toolbox">
										<!-- addthis_default_style" -->
										<p><a class="addthis_button_facebook_like" fb:like:layout="button_count" adthis:url="" addthis:title=""></a></p>
										<p><a class="addthis_button_tweet" tw:count="horitzontal" adthis:url="" addthis:title=""></a></p>
										<p><a class="addthis_button_googlebuzz" adthis:url="" addthis:title="">Google BUZZ</a></p>
										<p><a class="addthis_button_email" adthis:url="" addthis:title="" href="#">enviar e-mail</a></p>
									</div>
									<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d00f6fb66eae57a"></script>
									<!-- AddThis Button END -->
								</div> <!-- cerrar shareoptions //-->

							</div>
							<div class="cierre"></div>
						</div> <!-- cerrar caja //-->
					</div> <!-- cerrar sharetip //-->

<!-- CERRAR COMPARTIR //-->

				</div> <!-- cerrar #tarjeta //-->

				<div class="mas_info_tarjeta">
					<p class="peque">
						<a href="" title="Mis compras de esta tarjeta">Mis compras de esta tarjeta</a> <br />
						<a href="" title="Pagina de esta tarjeta">Página de esta tarjeta</a>
					</p>

					<div class="fecha">
						<p class="countdown_amount"><span class="countdown_section"><span class="countdown_amount">12/12/2010</span><br /><span class="micro">FECHA DE AFILIACIÓN</span> </span></p>
					</div>
					<div class="fecha">
						<p class="countdown_amount"><span class="countdown_section"><span class="countdown_amount">12/12/2012</span><br /><span class="micro">FECHA DE CADUCIDAD</span> </span></p>
					</div>

					<div class="clear">&nbsp;</div>

					<p class="boton secundario"><a href="#">desconectarse</a></p>
				</div>

				<div class="clear"></div>

				<div class="caja c600">
					<div class="content">
						<div class="mainboxtitle">
							<h5 id="mispromos">Mis promociones</h5>
							<p class="linkbutton"><a href="#como-consigo">[como consigo y valido cupones]</a></p>
						</div> <!-- /.mainboxtitle -->

						<ul class="mispromociones-list">
							<li class="lapromocion">
								<div class="pasos">
									<p class="bolitas">
										<span class="activada"><b>√</b></span>
										<span class="activada"><b>√</b></span>
										<span class="activada"><b>√</b></span>
										<span><b>0</b></span>
										<span><b>0</b></span>
									</p>
									<p class="necesitas small xtrasoft">valida 5 cupones para acceder a esta oferta</p>
								</div> <!-- /.pasos -->
						
								<div class="descripcion-listado">
									<span class="corners w70px l"><img src="images/pans/ofertas/menu-tentacion/menu-tentacion-thumb.jpg" alt="" /><span class="cornersall"></span></span>
									
									<h3 class=""><a title="ver detalles de esta oferta" href="#">Menú Tentación 2x1</a></h3>
									<p>Bocadillo de beicon, café con leche grande o té.</p>
									<p class="linkbutton small"><a href="#">[tiendas participantes]</a></p>
									
									<div class="compartir">
										<p>
											<a title="comparte esta oferta en facebook" href="#" class="facebook"><span>facebook</span></a>
											<a title="comparte esta oferta en twitter" href="#" class="twitter"><span>twitter</span></a>
											<a title="comparte esta oferta por e-mail" href="#" class="e-mail"><span>e-mail</span></a>
										</p>
									</div> <!-- /.compartir -->
								</div> <!-- /.descripcion -->
								
									<ul class="compras-validadas">
										<li>
											<p class="pqarial">
												<a title="Haz click para ver los detalles" id="det_trigger_1" onclick="verdetalles('1'); return false;" href="#">
													<span class="bolita activada"><b>√</b></span>
													<span class="fecha-compra">2011/03/06</span>
													<span class="tipo-compra">Compra validada</span>
													<span class="interrogante">?</span>
												</a>
											</p>

											<!-- ventanita emergente 1 //-->
											<div id="detalles_1" class="detalles" style="bottom: 40px; left: 20px;">
												<p class="peque">Compra de un menú Pans &amp; Fans</p>
												<div class="det-description">
													<p class="peque soft">
														<span class="corners w50px l"><img src="images/pans/ofertas/menu-vegetal/menu-vegetal-thumb.jpg" width="50" alt="" /><span class="cornersall"></span></span>
														Aquí explicamos qué exactamente se compró, con un poco de detalle. <br />
													</p>
												</div> <!-- cerrar .description //-->
												<address class="peque">Pans &amp; Company, Plaça Sant Jaume s/n, Barcelona</address>
												<div class="det-cierre"></div>
											</div> <!-- cerrar .detalles //-->
										</li>

										<li>
											<p class="pqarial">
												<a title="Haz click para ver los detalles" id="det_trigger_2" onclick="verdetalles('2'); return false;" href="#">
													<span class="bolita activada"><b>√</b></span>
													<span class="fecha-compra">2011/03/06</span>
													<span class="tipo-compra">Compra validada</span>
													<span class="interrogante">?</span>
												</a>
											</p>

											<!-- ventanita emergente 2 //-->
											<div id="detalles_2" class="detalles" style="bottom: 40px; left: 20px;">
												<p class="peque">Compra de un menú Pans &amp; Fans</p>
												<div class="det-description">
													<p class="peque soft">
														<span class="corners w50px l"><img src="images/pans/ofertas/menu-vegetal/menu-vegetal-thumb.jpg" width="50" alt="" /><span class="cornersall"></span></span>
														Aquí explicamos qué exactamente se compró, con un poco de detalle. <br />
													</p>
												</div> <!-- cerrar .description //-->
												<address class="peque">Pans &amp; Company, Plaça Sant Jaume s/n, Barcelona</address>
												<div class="det-cierre"></div>
											</div> <!-- cerrar .detalles //-->
										</li>


										<li>
											<p class="pqarial">
												<a title="Haz click para ver los detalles" id="det_trigger_3" onclick="verdetalles('3'); return false;" href="#">
													<span class="bolita activada"><b>√</b></span>
													<span class="fecha-compra">2011/03/06</span>
													<span class="tipo-compra">Compra validada</span>
													<span class="interrogante">?</span>
												</a>
											</p>

											<!-- ventanita emergente 3 //-->
											<div id="detalles_3" class="detalles" style="bottom: 40px; left: 20px;">
												<p class="peque">Compra de un menú Pans &amp; Fans</p>
												<div class="det-description">
													<p class="peque soft">
														<span class="corners w50px l"><img src="images/pans/ofertas/menu-vegetal/menu-vegetal-thumb.jpg" width="50" alt="" /><span class="cornersall"></span></span>
														Aquí explicamos qué exactamente se compró, con un poco de detalle. <br />
													</p>
												</div> <!-- cerrar .description //-->
												<address class="peque">Pans &amp; Company, Plaça Sant Jaume s/n, Barcelona</address>
												<div class="det-cierre"></div>
											</div> <!-- cerrar .detalles //-->
										</li>


									</ul> <!-- /.compras-validadas -->
								
							</li> <!-- /.lapromocion -->



							<li class="lapromocion">
								<div class="pasos">
									<p class="bolitas">
										<span class="activada"><b>√</b></span>
										<span><b>0</b></span>
										<span><b>0</b></span>
										<span><b>0</b></span>
										<span><b>0</b></span>
									</p>
									<p class="necesitas small xtrasoft">valida 5 cupones para acceder a esta oferta</p>
								</div> <!-- /.pasos -->
						
								<div class="descripcion-listado">
									<span class="corners w70px l"><img src="images/pans/ofertas/menu-vegetal/menu-vegetal-thumb.jpg" alt="" /><span class="cornersall"></span></span>
									
									<h3 class=""><a title="ver detalles de esta oferta" href="#">Menú Tentación Vegetal 2x1</a></h3>
									<p>Bocadillo de beicon, café con leche grande o té.</p>
									<p class="linkbutton small"><a href="#">[tiendas participantes]</a></p>
									
									<div class="compartir">
										<p>
											<a title="comparte esta oferta en facebook" href="#" class="facebook"><span>facebook</span></a>
											<a title="comparte esta oferta en twitter" href="#" class="twitter"><span>twitter</span></a>
											<a title="comparte esta oferta por e-mail" href="#" class="e-mail"><span>e-mail</span></a>
										</p>
									</div> <!-- /.compartir -->
								</div> <!-- /.descripcion -->
								
									<ul class="compras-validadas">
										<li>
											<p class="pqarial">
												<a title="Haz click para ver los detalles" id="det_trigger_21" onclick="verdetalles('21'); return false;" href="#">
													<span class="bolita activada"><b>√</b></span>
													<span class="fecha-compra">2011/03/06</span>
													<span class="tipo-compra">Compra validada</span>
													<span class="interrogante">?</span>
												</a>
											</p>

											<!-- ventanita emergente 21 //-->
											<div id="detalles_21" class="detalles" style="bottom: 40px; left: 20px;">
												<p class="peque">Compra de un menú Pans &amp; Fans</p>
												<div class="det-description">
													<p class="peque soft">
														<span class="corners w50px l"><img src="images/pans/ofertas/menu-vegetal/menu-vegetal-thumb.jpg" width="50" alt="" /><span class="cornersall"></span></span>
														Aquí explicamos qué exactamente se compró, con un poco de detalle. <br />
													</p>
												</div> <!-- cerrar .description //-->
												<address class="peque">Pans &amp; Company, Plaça Sant Jaume s/n, Barcelona</address>
												<div class="det-cierre"></div>
											</div> <!-- cerrar .detalles //-->

										</li>
									</ul> <!-- /.compras-validadas -->
								
							</li> <!-- /.lapromocion -->
						</ul> <!-- /.mispromociones-list -->


					</div> <!-- /.content -->
				</div> <!-- /.caja -->


				<div class="caja c600">
					<div class="content">
						<div class="mainboxtitle">
							<h5 id="como-consigo">¿Como consigo y valido cupones?</h5>
							<p class="linkbutton"><a href="#mispromos">[mis promociones]</a></p>
						</div> <!-- /.mainboxtitle -->

						<ul class="valida-cupones">
							<li class="pqarial"><strong>1. Compra en nuestra tienda</strong> Si compras un producto con un valor superior a 10 € en nuestra tienda, te regalamos un cupon.</li>
							<li class="pqarial"><strong>2. Conectate a esta web</strong> Con el cupon a mano, conectate a qporama con tu usuario y palabra clave.</li>
							<li class="pqarial"><strong>3. Introduce el número del cupon</strong> Introduce el número que sale en el cupon en el <a href="#">campo previsto</a>.</li>
						</ul>

					</div> <!-- /.content -->
				</div> <!-- /.caja -->





		</div> <!-- cerrar div formulario grande //-->
		<div class="clear">&nbsp;</div>
	</div> <!-- cerrar content //-->
	<div class="cierre"></div>
</div> <!-- cerrar caja c960 f1f1f1 //-->
</div> <!-- cerrar columna de 960px de ancho //-->
</div> <!-- cerrar page //-->

<div id="gototop"> <p><a href="#top">volver arriba</a></p></div>

</body>
</html>
